<template>
  <header>
    <div class="banxin tanxin head">
      <div class="header_l">
        <h1 class="logo"></h1>
        <ul>
          <li
            :class="{ active: $route.path === '/home' || $route.path === '/' }"
            @click="$router.push('/home')"
          >
            发现音乐
          </li>
          <li>我的音乐</li>
          <li>关注</li>
          <li>商城</li>
          <li>音乐人</li>
          <li>下载客户端</li>
        </ul>
      </div>
      <div class="header_r">
        <input
          type="text"
          placeholder="🔍音乐/视频/电台/用户"
          v-model="TxtVal"
          @click="search"
        />
        <div>创作者中心</div>
        <!-- <img class="photo" src="../assets/logo.png" alt="" /> -->
        <button v-if="isShowLogin" @click="goLogin">登录</button>
        <button class="btn" v-else>用户</button>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  data() {
    return {
      //是否显示登录
      isShowLogin: true,
      TxtVal:""
    };
  },
  methods: {
    search(){
      if(this.TxtVal.trim()==""){
        return
      }else{
         this.$router.push("/search");
        this.$store.commit("chagesearch", this.TxtVal);
      }
      
    },
    //模态框
    goLogin() {
      console.log(123);
      this.$store.commit("changeIsShowLogin", true);
    },
  },
};
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";
header {
  height: 70px;
  background-color: @black;
  .head {
    .header_l {
      height: 70px;
      display: flex;
      h1 {
        float: left;
        width: 176px;
        height: 69px;
        background-position: 0 0;
        background: url("../assets/topbar.png") no-repeat;
      }
      ul {
        display: flex;
        justify-content: center;
        align-items: center;
        li {
          color: white;
          margin-right: 20px;
          cursor: pointer;
        }
      }
    }
    .header_r {
      display: flex;
      color: white;
      input {
        width: 160px;
        height: 33px;
        border-radius: 20px 20px 20px 20px;
        margin: auto;
        padding-left: 10px;
        outline-style: none;
      }
      div {
        width: 100px;
        height: 33px;
        margin: auto;
        margin-left: 15px;
        line-height: 33px;
        border: 1px solid #ccc;
        border-radius: 20px 20px 20px 20px;
      }
      /* .photo {
        width: 50px;
        margin: auto;
        margin-left: 20px;
      } */
      button {
        width: 90px;
        height: 32px;
        background: #242424;
        border: 1px solid #666;
        margin-top: 20px;
        border-radius: 16px;
        margin-left: 10px;
        color: #ccc;
        font-size: 12px;
        cursor: pointer;
      }
    }
  }
}
</style>